<div class="bjui-pageContent">
    <div style="padding:20px;">
        <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#datagrid-demo5-demo" role="tab" data-toggle="tab">示例</a></li>
            <li><a href="#datagrid-demo5-source" role="tab" data-toggle="tab">源码</a></li>
            <li><a href="#datagrid-demo5-source-json" role="tab" data-toggle="tab">JSON源码</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade active in" id="datagrid-demo5-demo">
                <table id="doc-datagrid-table4" data-toggle="datagrid" data-options="{
                    columns: [{name:'name', width:'150', label:'姓名'}, {name:'firstname', width:'120', label:'拼音姓'}, {name:'lastname', label:'拼音名'}],
                    dataUrl: 'doc/datagrid/demo5-json.js'
                }"></table>
            </div>
            <div class="tab-pane fade" id="datagrid-demo5-source">
                <pre class="brush: html">
                    &lt;table id="doc-datagrid-table4" data-toggle="datagrid" data-options="{
                        columns: [{name:'name', width:'150', label:'姓名'}, {name:'firstname', width:'120', label:'拼音姓'}, {name:'lastname', label:'拼音名'}],
                        dataUrl: 'doc/datagrid/demo5-json.js'
                    }"&gt;&lt;/table&gt;
                </pre>
            </div>
            <div class="tab-pane fade" id="datagrid-demo5-source-json">
                <pre class="brush: html">
                    [
                        {"name":"孙悟空","firstname":"Sun","lastname":"Wukong"},
                        {"name":"罗宾汉","firstname":"Luo","lastname":"Binhan"},
                        {"name":"美国队长","firstname":"Meiguo","lastname":"Duizhang"}
                    ]
                </pre>
            </div>
        </div>
    </div>
</div>
<div class="bjui-pageFooter">
    <ul>
        <li><button type="button" class="btn-close" data-icon="close">关闭</button></li>
    </ul>
</div>